<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;background-color: red;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>

  var box = document.querySelector(".box")

  // 绑定事件
  // box.onclick = function(){
  //   console.log(1);
  // }
  // box.onclick = function(){
  //   console.log(2);
  // }
  // 不能重复绑定，一个事件只能绑定一个事件处理函数
  // 没有兼容

  // 解绑：利用重复赋值会覆盖的特性
  // box.onclick = null;

  
  // 绑定事件：添加事件监听
  // box.addEventListener("click", fn);
  // function fn(){
  //   console.log("hello");
  // }
  // box.addEventListener("click", function(){
  //   console.log("world");
  // });
  // 能重复绑定，一个事件可以绑定多个事件处理函数

  // 解绑：删除事件监听
  // box.removeEventListener("click", fn);

  // 有兼容，以上方法，正常浏览器

  // IE低版本浏览器：
  // 绑定：
  // box.attachEvent("onclick", fn)
  // function fn(){
  //   console.log("hello")
  // }
  // box.attachEvent("onclick", function(){
  //   console.log("world")
  // })
  // 解绑
  // box.detachEvent("onclick", fn);

  // 事件监听式绑定和删除事件的兼容封装
  function addEvent(ele, type, cb){
    if( ele.attachEvent ){
      ele.attachEvent("on"+type, cb);
    }else{
      ele.addEventListener(type, cb);
    }
  }
  function removeEvent(ele, type, cb){
    if( ele.detachEvent ){
      ele.detachEvent("on"+type, cb);
    }else{
      ele.removeEventListener(type, cb);
    }
  }


  // 绑定
  addEvent(box, "click", fn1);
  addEvent(box, "click", fn2);
  addEvent(box, "click", fn3);

  // 解绑
  removeEvent(box, "click", fn2);
  removeEvent(box, "click", fn1);



  function fn1(){
    console.log(1)
  }
  function fn2(){
    console.log(2)
  }
  function fn3(){
    console.log(3)
  }

</script>
</html>